<template>
	<view class="page" :style="'height:' + height + 'rpx'">
		<view class="box">
			<view class="member_item" v-for="(item,index) in memberList" :key="index">
				<view class="member_item_name">
					{{item.info}}
				</view>
				<view class="close iconfont icon-guanbi" @click="close(index)">
				</view>
			</view>
		</view>
		<view class="noDataTip" v-if="memberList.length == 0">
			<view class="iconfont icon-wuanpai" style="color:#6B6B6B;margin-right: 25rpx;font-size: 45rpx;"></view>
			<view style="font-size: 45rpx;">已无人员数据!</view>
		</view>

	</view>
</template>

<script>
	import getDepartMentMixin from "../../static/js/getDepartMentMixin.js"
	export default {
		mixins: [getDepartMentMixin],
		onLoad(option) {
			// console.log('配置',option);
			this.xlsId = option.xlsId;
			this.header.Authority = uni.getStorageSync('Authority');
			// console.log(this.xlsId)
			uni.showLoading({
				title: '请稍后..',
				mask: true
				// mask: true
			})
			this.getMember(() => {
				uni.hideLoading();
			}); //mixin导入的

		},
		data() {
			return {
				xlsId: '',
				header: {
					Authority: ''
				},
			}
		},
		methods: {
			//删除某一成员
			close(index) {
				let that = this;
				// console.log('删除');
				uni.showModal({
					title: '提示',
					content: '确定删除此成员？',
					success: function(res) {
						if (res.confirm) {
							let deleteArray = [];
							deleteArray.push(that.memberList[index].no)
							// that.memberList.splice(index, 1)
							that.deleteMember(deleteArray,index)

						} else if (res.cancel) {}
					}
				});
			},
			async deleteMember(deleteArray,index) {
				let body = {
					noList: [],
					xlsId: ''
				}
				body.noList = deleteArray;
				console.log(body)
				body.xlsId = this.xlsId;
				let res = await getApp().UniRequest("/timeoff/authority/delMember",
					"post", body,
					this.header);
				console.log(res, '删除结果')
				if (res.code === 20000) {
					uni.showToast({
						title: '删除成功',
						icon: 'success',
						duration: 2000
					});
					this.memberList.splice(index, 1)
				} else {
					uni.showToast({
						title: '请稍后重试',
						icon: 'error',
						duration: 2000
					});
				}
			},
			// async deleteMember(no,index) {
			// 	let res = await getApp().UniRequest("/timeoff/authority/delMember?no=" + no + '&xlsId=' + this.xlsId , "POST", "",
			// 		this.header);
			// 		// console.log(res,'删除结果')
			// 		if (res.code === 20000) {
			// 			uni.showToast({
			// 			    title: '删除成功',
			// 				icon: 'success',
			// 			    duration: 2000
			// 			});
			// 			 this.memberList.splice(index,1)
			// 		} else {
			// 			uni.showToast({
			// 			    title: '请稍后重试',
			// 				icon: 'error',
			// 			    duration: 2000
			// 			});
			// 		}

			// }
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		padding: 0rpx 20rpx 0rpx 20rpx;

		.box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		.member_item {
			width: 46%;
			height: 90rpx;
			position: relative;
			line-height: 90rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 10rpx;
			color: #707070;
			margin-right: 4%;
			margin-top: 20rpx;
			box-shadow: 0.1rpx 0.1rpx 10rpx #D9D9D9;

			.member_item_name {
				width: 100%;
				padding-left: 5rpx;
				padding-right: 5rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.close {
				width: 30rpx;
				height: 26rpx;
				border-radius: 50%;
				// background-color: pink;
				position: absolute;
				top: 12%;
				right: 2%;
				background: rgba(0, 0, 0, 0.3);
				line-height: 26rpx;
				text-align: center;
				font-size: 20rpx;
				font-weight: 700;
				color: #E5E5E5;
			}
		}

		.noDataTip {
			height: 150rpx;
			width: 650rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 50%;
			margin-top: -150rpx;
			left: 50%;
			margin-left: -325rpx;
			font-size: 50rpx;
			color: #6B6B6B;
			// background-color: #fff;
			// box-shadow: 0.5rpx 0.5rpx 40rpx #DBDBDB;
			border-radius: 20rpx;
		}
	}
</style>
